<template>
  <view :class="$style.linkage_container">
    <view :class="$style.title">{{ titleName }}</view>

    <view :class="$style.statistic" class="flex justify-center items-baseline">
    </view>

    <view :class="$style.content">
      <view class="flex justify-between" style="margin:15rpx 0  15rpx 0; ">
        <view :class="$style.power_info" class="flex">
          <view :class="$style.organization">消防控制室 : </view>
          <view :class="$style.contact_name">{{ contacts.xfkzs }}</view>
          <!-- <view :class="$style.contact_name">{{item.phone}}</view> -->
        </view>
        <image :src="phoneImg" mode="widthFix" style="width: 40rpx; margin-right: 20rpx;" />
      </view>
      <view class="flex justify-between" style="margin:15rpx 0  15rpx 0; ">
        <view :class="$style.power_info" class="flex">
          <view :class="$style.organization">室内消火栓 : </view>
          <view :class="$style.contact_name">{{ contacts.snxhs }}</view>
          <!-- <view :class="$style.contact_name">{{item.phone}}</view> -->
        </view>
        <!-- <image :src="phoneImg" mode="widthFix" style="width: 40rpx; margin-right: 20rpx;" /> -->
      </view>

      <view class="flex justify-between" style="margin:15rpx 0  15rpx 0; ">
        <view :class="$style.power_info" class="flex">
          <view :class="$style.organization">自动喷淋系统 : </view>
          <view :class="$style.contact_name">{{ contacts.zdplxt }}</view>
          <!-- <view :class="$style.contact_name">{{item.phone}}</view> -->
        </view>
        <image :src="picImg" mode="widthFix" style="width: 40rpx; margin-right: 20rpx;" />
      </view>

      <view class="flex justify-between" style="margin:15rpx 0  15rpx 0; ">
        <view :class="$style.power_info" class="flex">
          <view :class="$style.organization">消防水箱 : </view>
          <view :class="$style.contact_name">{{ contacts.xfsx }}</view>
          <!-- <view :class="$style.contact_name">{{item.phone}}</view> -->
        </view>
        <image :src="picImg" mode="widthFix" style="width: 40rpx; margin-right: 20rpx;" />
      </view>
      <view class="flex justify-between" style="margin:15rpx 0  15rpx 0; ">
        <view :class="$style.power_info" class="flex">
          <view :class="$style.organization">登高车作业面 : </view>
          <view :class="$style.contact_name">{{ contacts.dgczym }}</view>
          <!-- <view :class="$style.contact_name">{{item.phone}}</view> -->
        </view>
        <!-- <image :src="phoneImg" mode="widthFix" style="width: 40rpx; margin-right: 20rpx;" /> -->
      </view>
    </view>

  </view>

</template>

<script setup lang='ts'>
import { ref } from "vue";
import phoneImg from "@/static/images/alert-detail/phone.png";
import picImg from "@/static/images/common/tp.png";
const titleName = ref<string>("建筑消防设施");

const contacts = ref<any>(
  {
    xfkzs: '18790987367',
    snxhs: '压力0Mpa',
    zdplxt: '压力2Mpa',
    xfsx: '18吨',
    dgczym: '12*12m'
  }
);
</script>

<style lang='less' module>
.linkage_container {
  width: calc(100% - 60rpx);
  min-height: 350rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  padding: 10rpx 10rpx 10rpx 20rpx;
  border-radius: 20rpx;
  font-family: Microsoft YaHei;

  .title {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333
  }

  .statistic {
    font-weight: bold;
    color: #2264d3;
    line-height: 40px;

    .number {
      font-size: 60rpx;
    }

    .text {
      font-size: 26rpx;
    }
  }

  .content {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;

    .organization {
      margin-left: 15rpx;
    }

    .contact_name {
      margin-left: 15rpx;
    }

    .state {
      margin-left: 20rpx;
      background: #00d195;
      border-radius: 8rpx;
      padding: 5rpx 10rpx;
      font-size: 22rpx;
      color: #ffffff;
    }
  }
}
</style>
